<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <div class="top-box">
          <el-image
            v-if="pageAjax.data.avatarUrl"
            style="width: 100px; height: 100px; border-radius:50%"
            :src="pageAjax.data.avatarUrl"
            fit="cover"
          ></el-image>
          <div style="flex:1;padding-left: 30px">
            <el-radio-group v-model="radio1">
              <el-radio-button label="1">基本信息</el-radio-button>
              <el-radio-button label="2"
                >直播经验（{{
                  pageAjax.data.hasLiveExperience ? "有" : "素人"
                }}）</el-radio-button
              >
              <el-radio-button label="3">招募评价</el-radio-button>
            </el-radio-group>
            <div>
              <div style="padding-top: 10px" v-if="radio1 === '1'">
                <div v-if="pageAjax.data.nickName" class="inline-block">
                  昵称:{{ pageAjax.data.nickName }}
                </div>
                <!-- <div class="inline-block">
                    姓名:{{ pageAjax.data.nickName || "无" }}
                  </div> -->
                <div class="inline-block">
                  性别:{{ pageAjax.data.gender == 1 ? "男" : "女" }}
                </div>

                <template v-if="isShowContact">
                  <div v-if="pageAjax.data.wxNo" class="inline-block">
                    微信号:{{ pageAjax.data.wxNo }}
                  </div>
                  <div v-if="pageAjax.data.contractPhone" class="inline-block">
                    联系电话:{{ pageAjax.data.contractPhone }}
                  </div>
                  <div v-if="pageAjax.data.idCard" class="inline-block">
                    身份证号码:{{ pageAjax.data.idCard }}
                  </div>
                </template>
                <div class="inline-block">
                  来源:<span v-if="pageAjax.data.source == 0"
                    >自招({{
                      pageAjax.data.onlineType == "ONLINE" ? "线上" : "线下"
                    }})</span
                  >
                  <span v-else-if="pageAjax.data.source == 1"
                    >星探({{ pageAjax.data.scoutName }})</span
                  >
                  <span v-else>联营({{ pageAjax.data.unionName }})</span>
                </div>
                <div
                  class="inline-block"
                  v-if="pageAjax.data.talentSkills.length"
                >
                  才艺:
                  <span
                    v-for="item in translateData(
                      pageAjax.data.talentSkills,
                      $store.state.skillList
                    )"
                    :key="item.id"
                  >
                    {{ item.value }}
                  </span>
                  <span v-if="pageAjax.data.talentSkillExt">
                    其他:
                    <span>
                      {{ pageAjax.data.talentSkillExt }}
                    </span>
                  </span>
                </div>
                <div
                  class="inline-block"
                  v-if="pageAjax.data.artistDevIntention"
                >
                  发展意向:{{ pageAjax.data.artistDevIntention }}
                </div>
                <!-- {{ pageAjax.data.intentionPlatforms.length }} -->
                <div
                  v-if="pageAjax.data.intentionPlatforms.length"
                  class="inline-block"
                >
                  <template
                    v-if="
                      pageAjax.data.intentionPlatforms.length ===
                        alone.allPlatformlength
                    "
                  >
                    意向平台: 全部
                  </template>
                  <template v-else>
                    意向平台: {{ alone.pageAjax.allPlatform.join() }}
                    <span v-if="pageAjax.data.intentionPlatformExt">
                      其他:
                      <span>
                        {{ pageAjax.data.intentionPlatformExt }}
                      </span>
                    </span>
                    <!-- <el-cascader
                      collapse-tags
                      v-model="pageAjax.data.intentionPlatforms"
                      :props="{
                        multiple: true,
                        label: 'name',
                        value: 'id',
                        emitPath: false
                      }"
                      :options="platformListSupAjax.wantPlatformList"
                    >
                    </el-cascader> -->
                  </template>
                </div>
                <div
                  class="inline-block"
                  v-if="
                    pageAjax.data.expectedBaseSalary ||
                      pageAjax.data.expectedBottomGuard ||
                      pageAjax.data.expectedSigningBonus ||
                      pageAjax.data.expectedOther
                  "
                >
                  期待待遇:
                  <span class="in" v-if="pageAjax.data.expectedBaseSalary">
                    底薪 : {{ pageAjax.data.expectedBaseSalary }}
                  </span>
                  <span class="in" v-if="pageAjax.data.expectedBottomGuard">
                    保底 : {{ pageAjax.data.expectedBottomGuard }}
                  </span>
                  <span class="in" v-if="pageAjax.data.expectedSigningBonus">
                    签约金 : {{ pageAjax.data.expectedSigningBonus }}
                  </span>
                  <span class="in" v-if="pageAjax.data.expectedOther">
                    其他 : {{ pageAjax.data.expectedOther }}
                  </span>
                </div>
              </div>
              <div v-if="radio1 === '2'">
                <div
                  class="c-liveExpEditVoList"
                  v-if="pageAjax.data.liveExpEditVoList.length"
                >
                  <el-select
                    v-model="alone.pageAjax.index"
                    style="margin-top : 40px"
                  >
                    <el-option
                      v-for="item in alone.pageAjax.selectLiveExp"
                      :key="item.index"
                      :label="item.name"
                      :value="item.index"
                    >
                    </el-option>
                  </el-select>
                  <div class="block" style="flex:1;padding-left: 30px">
                    <div class="block c-liveExpEditVo">
                      <el-form
                        ref="form"
                        :model="pageAjax.data"
                        :rules="pageAjax.rules"
                        label-width="100px"
                        inline
                      >
                        <div class="mi-title"></div>
                        <el-form-item label="直播平台：">
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].platfomId || "无"
                          }}
                        </el-form-item>
                        <el-form-item label="直播id：">
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].liveId || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="粉丝数量："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].fansCount
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].fansCount || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="原公会："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].tradeUnion
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].tradeUnion || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="月流水："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].monthStream
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].monthStream || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="原待遇："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].monthIncome
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].monthIncome || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="直播等级："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].level
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].level || "无"
                          }}
                        </el-form-item>
                        <el-form-item
                          label="直播年限："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].broadcastYears
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].broadcastYears || "无"
                          }}
                          年
                        </el-form-item>
                        <el-form-item
                          label="日均直播时长："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].totalLiveTime
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].totalLiveTime || "无"
                          }}
                          小时/日
                        </el-form-item>
                        <el-form-item
                          label="直播时间段："
                          v-if="
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].liveTimeStart
                          "
                        >
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].liveTimeStart || "无"
                          }}
                          ~
                          {{
                            pageAjax.data.liveExpEditVoList[
                              alone.pageAjax.index
                            ].liveTimeEnd || "无"
                          }}
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
                <div style="padding-top: 15px " v-else>该主播还是个素人~</div>
              </div>
              <div v-if="radio1 === '3'">
                <div class="block" style="padding-top: 15px">
                  <el-form
                    ref="form"
                    label-width="70px"
                    block
                    class="form-compact"
                  >
                    <el-form-item label="外貌评价">
                      <el-rate
                        v-model="alone.pageAjax.data.starLooks"
                        style="margin-top: 5px;"
                        disabled
                      ></el-rate>
                    </el-form-item>
                    <el-form-item label="才艺评价">
                      <el-rate
                        v-model="alone.pageAjax.data.starSkills"
                        style="margin-top: 5px;"
                        disabled
                      ></el-rate>
                    </el-form-item>
                    <el-form-item label="口才评价">
                      <el-rate
                        v-model="alone.pageAjax.data.starEloquence"
                        style="margin-top: 5px;"
                        disabled
                      ></el-rate>
                    </el-form-item>
                    <div class="block">
                      <el-form-item
                        label="其他意见"
                        v-if="alone.pageAjax.data.otherOpinion"
                      >
                        {{ alone.pageAjax.data.otherOpinion || "无" }}
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-divider></el-divider>
        <div>
          <div
            class="mi-upload mi-uploadVideo"
            v-if="pageAjax.data.videos.length"
          >
            <div class="mi-title">
              视频：
            </div>
            <div class="m-files">
              <div class="m-preview clearfix">
                <div
                  class="m-file"
                  v-for="(item, index) in pageAjax.data.videos"
                  :key="index"
                >
                  <div class="m-respBox">
                    <div class="m-full">
                      <div
                        class="m-operation video flex item-v-center item-h-center"
                      >
                        <i
                          class="el-icon-video-play"
                          @click="rViewVideo(item)"
                        ></i>
                      </div>
                      <video :src="item"></video>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mi-upload mi-uploadImg" v-if="pageAjax.data.pics.length">
            <div class="mi-title">
              主播图片(第一张默认为主播头像)：
            </div>

            <div class="m-files">
              <div class="m-preview clearfix">
                <template>
                  <div
                    class="m-file pic"
                    v-for="(item, index) in pageAjax.data.pics"
                    :key="index"
                  >
                    <div class="m-respBox">
                      <div class="m-full">
                        <el-image
                          fit="cover"
                          :src="item"
                          :preview-src-list="[item]"
                        >
                        </el-image>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="mi-upload" v-if="pageAjax.data.videoLinks.length">
            <div class="mi-title">
              视频链接<template
                v-for="(item, index) in pageAjax.data.videoLinks"
              >
                <el-link
                  class="link"
                  :key="index"
                  :href="pageAjax.data.videoLinks[index]"
                  target="_blank"
                  >视频链接{{ index + 1 }}</el-link
                >
              </template>
            </div>
          </div>
        </div>
        <div class="c-videoLink"></div>
        <!-- <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-form
              ref="form"
              :model="pageAjax.data"
              :rules="pageAjax.rules"
              label-width="120px"
            >
              <div class="block">
                <el-form-item label="来源：" class="inlineBlock">
                  <span v-if="pageAjax.data.source == 0"
                    >自招({{
                      pageAjax.data.onlineType == "ONLINE" ? "线上" : "线下"
                    }})</span
                  >
                  <span v-else-if="pageAjax.data.source == 1"
                    >星探({{ pageAjax.data.scoutName }})</span
                  >
                  <span v-else>联营({{ pageAjax.data.unionName }})</span>
                </el-form-item>
              </div>
              <div class="block">
                <el-form-item
                  label="昵称："
                  class="inlineBlock"
                  prop="nickName"
                >
                  {{ pageAjax.data.nickName || "无" }}
                </el-form-item>
                <el-form-item
                  label="微信号："
                  class="inlineBlock"
                  v-if="isSeestarOwn"
                >
                  {{ pageAjax.data.wxNo || "无" }}
                </el-form-item>
                <el-form-item label="性别：" class="inlineBlock">
                  {{ pageAjax.data.gender == 1 ? "男" : "女" }}
                </el-form-item>
                <el-form-item
                  label="联系电话："
                  class="inlineBlock"
                  v-if="isSeestarOwn"
                >
                  {{ pageAjax.data.contractPhone || "无" }}
                </el-form-item>
                <el-form-item
                  label="身份证："
                  class="inlineBlock"
                  v-if="isSeestarOwn"
                >
                  {{ pageAjax.data.idCard || "无" }}
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="mi-upload">
                <div class="mi-title">
                  主播图片(第一张默认为主播头像)
                </div>

                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div
                      class="m-file"
                      v-for="(item, index) in pageAjax.data.pics"
                      :key="index"
                    >
                      <div class="m-operation flex item-v-center item-h-center">
                        <i class="el-icon-view" @click="rViewImg"></i>
                      </div>
                      <img :src="item" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <el-divider
                v-if="pageAjax.data.videos && pageAjax.data.videos.length"
              ></el-divider>
              <div class="mi-upload">
                <div class="mi-title">
                  视频
                </div>
                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div
                      class="m-file"
                      v-for="(item, index) in pageAjax.data.videos"
                      :key="index"
                    >
                      <div class="m-operation flex item-v-center item-h-center">
                        <i class="el-icon-view" @click="rViewVideo(item)"></i>
                      </div>
                      <video :src="item"></video>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider
                v-if="
                  pageAjax.data.videoLinks && pageAjax.data.videoLinks.length
                "
              ></el-divider>
              <div class="c-videoLink">
                <div class="block">
                  <el-form-item
                    v-for="(item, index) in pageAjax.data.videoLinks"
                    :label="'视频链接' + (index + 1) + '：'"
                    :key="index"
                    class="block"
                  >
                    <el-link type="info" :href="pageAjax.data.videoLinks[index]"
                      >点击查看</el-link
                    >
                  </el-form-item>
                </div>
              </div>
              <el-divider
                v-if="
                  pageAjax.data.liveExpEditVoList &&
                    pageAjax.data.liveExpEditVoList.length
                "
              ></el-divider>
              <div class="c-liveExpEditVoList">
                <div
                  class="block"
                  v-for="(item, index) in pageAjax.data.liveExpEditVoList"
                  :key="index"
                >
                  <div class="block c-liveExpEditVo">
                    <div class="mi-title">
                      <el-form-item :label="'直播经验' + (index + 1) + '：'">
                      </el-form-item>
                    </div>
                    <el-form-item label="直播平台：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].platfomId || "无"
                      }}
                    </el-form-item>
                    <el-form-item label="直播id：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].liveId || "无"
                      }}
                    </el-form-item>
                    <el-form-item label="粉丝数量：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].fansCount || "无"
                      }}
                    </el-form-item>
                    <el-form-item label="原公会：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].tradeUnion ||
                          "无"
                      }}
                    </el-form-item>
                    <el-form-item label="月流水：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].monthStream ||
                          "无"
                      }}
                    </el-form-item>
                    <el-form-item label="原待遇：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].monthIncome ||
                          "无"
                      }}
                    </el-form-item>
                    <el-form-item label="直播等级：">
                      {{ pageAjax.data.liveExpEditVoList[index].level || "无" }}
                    </el-form-item>
                    <el-form-item label="总直播时长：">
                      {{
                        pageAjax.data.liveExpEditVoList[index].totalLiveTime ||
                          "无"
                      }}
                    </el-form-item>
                    <div class="">
                      <div class="mi-title">
                        直播时间段
                      </div>
                      <div class="">
                        <el-form-item label="开始时间：">
                          {{
                            pageAjax.data.liveExpEditVoList[index]
                              .liveTimeStart || "无"
                          }}
                        </el-form-item>
                        <el-form-item label="结束时间：">
                          {{
                            pageAjax.data.liveExpEditVoList[index]
                              .liveTimeEnd || "无"
                          }}
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="block">
                <div class="block">
                  <el-form-item class="block" label-width="0">
                    <el-row type="flex" justify="center">
                      <el-col :sm="4" :md="4" :lg="3">
                        <span class="pl20">才艺选择：</span>
                      </el-col>
                      <el-col :sm="20" :md="20" :lg="21">
                        <span
                          class="mr20"
                          v-for="item in translateData(
                            pageAjax.data.talentSkills,
                            $store.state.skillList
                          )"
                          :key="item.id"
                          >{{ item.value }}</span
                        >
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>
                <div class="block">
                  <el-form-item label="其他：">
                    {{ pageAjax.data.talentSkillExt || "无" }}
                  </el-form-item>
                </div>

                <div class="block">
                  <el-form-item label="主播发展意向：">
                    {{ pageAjax.data.artistDevIntention || "无" }}
                  </el-form-item>
                </div>

                <div class="block">
                  <div class="block">
                    <el-form-item class="block" label-width="0">
                      <el-row type="flex" justify="center">
                        <el-col :sm="4" :md="4" :lg="3">
                          <span class="pl20">意向平台：</span>
                        </el-col>
                        <el-col :sm="20" :md="20" :lg="21">
                          <el-cascader
                            disabled
                            v-model="pageAjax.data.intentionPlatforms"
                            :props="{
                              multiple: true,
                              label: 'name',
                              value: 'id',
                              emitPath: false
                            }"
                            :options="platformListSupAjax.wantPlatformList"
                          >
                          </el-cascader>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </div>
                  <div class="block">
                    <el-form-item label="其他：">
                      {{ pageAjax.data.intentionPlatformExt || "无" }}
                    </el-form-item>
                  </div>
                </div>
                <div class="block">
                  <el-divider></el-divider>
                  <div class="mi-title">
                    期望待遇
                  </div>
                  <el-form-item label="底薪：">
                    {{ pageAjax.data.expectedBaseSalary || "无" }}
                  </el-form-item>
                  <el-form-item label="保底：">
                    {{ pageAjax.data.expectedBottomGuard || "无" }}
                  </el-form-item>
                  <el-form-item label="签约金：">
                    {{ pageAjax.data.expectedSigningBonus || "无" }}
                  </el-form-item>
                  <el-form-item label="其他：">
                    {{ pageAjax.data.expectedOther || "无" }}
                  </el-form-item>
                </div>
              </div>
              <div class="block">
                <el-divider></el-divider>
                <div class="mi-title">
                  招募评价
                </div>
                <div class="block">
                  <el-form-item label="外貌评价">
                    <el-rate
                      v-model="alone.pageAjax.data.starLooks"
                      disabled
                    ></el-rate>
                  </el-form-item>
                </div>
                <div class="block">
                  <el-form-item label="才艺评价">
                    <el-rate
                      v-model="alone.pageAjax.data.starSkills"
                      disabled
                    ></el-rate>
                  </el-form-item>
                </div>
                <div class="block">
                  <el-form-item label="口才评价">
                    <el-rate
                      v-model="alone.pageAjax.data.starEloquence"
                      disabled
                    ></el-rate>
                  </el-form-item>
                </div>
                <div class="block">
                  <el-form-item label="其他意见">
                    {{ alone.pageAjax.data.otherOpinion || "无" }}
                  </el-form-item>
                </div>
              </div>
              <div
                class="block"
                v-if="
                  pageAjax.data.anchorRecruitAppraise &&
                    pageAjax.data.anchorRecruitAppraise.recruit &&
                    pageAjax.data.anchorRecruitAppraise.recruit.userId &&
                    $store.state.userData.userId ==
                      pageAjax.data.anchorRecruitAppraise.recruit.userId
                "
              >
                <el-form-item class="block" label-width="0">
                  <el-row type="flex" justify="center">
                    <el-col :sm="6" :md="6" :lg="4">
                      <span class="pl20">发布公司及对应平台：</span>
                    </el-col>
                    <el-col :sm="20" :md="20" :lg="21">
                      <el-cascader
                        v-model="pageAjax.data.publishCorpIds"
                        v-if="$store.getters.hasChildrenCorporations"
                        :props="{
                          multiple: true,
                          label: 'name',
                          value: 'id',
                          emitPath: false,
                          checkStrictly: true
                        }"
                        :options="$store.state.userData.corporations"
                        disabled
                        clearable
                        placeholder="请选择发布的公司"
                      >
                      </el-cascader>
                      <el-cascader
                        v-model="pageAjax.data.publishPlatformIds"
                        :props="{
                          multiple: true,
                          label: 'name',
                          value: 'id',
                          emitPath: false
                        }"
                        :options="alone.platformList"
                        disabled
                        clearable
                        :key="Math.random()"
                        placeholder="请选择发布的平台"
                      >
                      </el-cascader>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
            </el-form>
          </el-col>
        </el-row> -->
      </div>
    </div>
    <!-- 图片预览插件 -->
    <!-- <el-image-viewer
      v-if="imgPreviewCp.config.show"
      :on-close="rCloseImgPreviewCp"
      :url-list="imgPreviewCp.data"
    /> -->
    <yj-img-preview
      :pics="imgPreviewCp.data"
      :show="imgPreviewCp.config.show"
      @close="rCloseImgPreviewCp"
    >
    </yj-img-preview>

    <!-- 视频预览 -->
    <el-dialog
      title
      :visible.sync="videoPreviewCp.config.show"
      width="60%"
      class="videoPreviewCpClass"
      @close="rCloseVideoPreviewCp"
    >
      <div class="c-videoBox">
        <div class="c-video">
          <video
            :src="videoPreviewCp.data.src"
            controls
            autoplay
            class="video"
            ref="videoPreviewCpRef"
            width="100%"
          ></video>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { getActorInfo } from "@/api/actor.js";
import {
  selectData,
  getOffspringnTree,
  tileNestingData
} from "@/assets/js/util.js";
import { getAllCorporationsPlatformList } from "@/api/others.js";
import { getPlatformList } from "@/api/authority.js";
import _ from "lodash";

export default {
  name: "actorDetail",
  // components: {ElImageViewer},
  data: () => ({
    pageAjax: {
      loading: false,
      data: {
        gender: 1,
        liveExpEditVoList: [],
        publishCorpIds: [],
        publishPlatformIds: [],
        intentionPlatforms: [],
        talentSkills: [],
        sourceDetail: "",
        source: 1,
        videoLinks: [],
        pics: [],
        videos: [],
        onlineType: "ONLINE"
      },
      rules: {
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }]
      }
    },
    radio1: "1",
    platformListSupAjax: {
      oldPlatfomList: [], // 用于直播经验里面的直播id
      wantPlatformList: [] // 意向主播
    },

    alone: {
      pageAjax: {
        selectLiveExp: [],
        index: 0,
        allPlatformlength: 0,
        isAllPlatform: false,
        allPlatform: [],
        data: {}
      },
      platformList: []
    },
    imgPreviewCp: {
      config: {
        show: false
      },
      data: []
    },
    videoPreviewCp: {
      config: {
        show: false
      },
      data: {
        src: ""
      }
    }
  }),
  watch: {
    "pageAjax.data"() {
      let anchorRecruitAppraise =
        this.pageAjax.data.anchorRecruitAppraise || {};
      this.alone.pageAjax.data = {
        otherOpinion: anchorRecruitAppraise.otherOpinion,
        starLooks: anchorRecruitAppraise.starLooks,
        starSkills: anchorRecruitAppraise.starSkills,
        starEloquence: anchorRecruitAppraise.starEloquence
      };
    }
  },
  computed: {
    isShowContact: function() {
      let _that = this;
      let anchorRecruitAppraise =
        _that.pageAjax.data.anchorRecruitAppraise || {};
      let recruit = anchorRecruitAppraise.recruit || {};
      let signStatusCanShow =
        _that.pageAjax.data.signStatus == "SIGNING" ||
        _that.pageAjax.data.signStatus == "SIGNED";
      let isSeestarOwn =
        recruit.userId && recruit.userId == this.$store.state.userData.userId;
      if (signStatusCanShow || isSeestarOwn) {
        return true;
      }
      return false;
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   // 在导航完成前获取数据
  //   console.log(to, from);
  //   next();
  // },
  created() {
    let _that = this;
    _that.getPageData().then(() => {
      _that.getPlatformListData();
      if (
        !_that.$store.getters.hasChildrenCorporations ||
        !_that.pageAjax.data.publishCorpIds ||
        !_that.pageAjax.data.publishCorpIds.length
      ) {
        _that.pageAjax.data.publishCorpIds =
          _that.pageAjax.data.publishCorpIds || [];
        _that.pageAjax.data.publishCorpIds.push(
          _that.$store.state.userData.corporations[0].id
        );
      }
      _that.getPublishPlatform();
    });
  },
  methods: {
    rCloseImgPreviewCp() {
      this.imgPreviewCp.config.show = false;
    },
    rViewImg() {
      let _that = this;
      let arr = _that.pageAjax.data.pics;
      // arr.forEach((item) => {
      //   item =
      // });
      _that.imgPreviewCp.data = arr;
      _that.imgPreviewCp.config.show = true;
    },
    rCloseVideoPreviewCp() {
      this.videoPreviewCp.data.src = "";
      this.videoPreviewCp.config.show = false;
    },
    rViewVideo(src) {
      let _that = this;
      // arr.forEach((item) => {
      //   item =
      // });
      _that.videoPreviewCp.data.src = src;
      _that.videoPreviewCp.config.show = true;
    },
    getPublishPlatform: _.debounce(function() {
      let _that = this;
      getAllCorporationsPlatformList({
        params: {
          corpIds: _that.pageAjax.data.publishCorpIds.join(","),
          mask: 2
        }
      })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let allPlatform = getOffspringnTree(respData.data, 0);
            this.alone.pageAjax.allPlatformlength = respData.data.length;
            this.alone.pageAjax.allPlatform = this.getTree(
              this.pageAjax.data.intentionPlatforms,
              respData.data
            );

            // console.log("allPlatform", allPlatform);
            // _that.alone.platformList = allPlatform;

            let arrAll = {
              id: 0,
              name: "全部",
              parentId: -1
            };
            arrAll.children = allPlatform;
            _that.alone.platformList = [arrAll];
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    }, 800),
    getPageData() {
      let _that = this;

      return getActorInfo({ params: { anchorId: _that.$route.query.anchorId } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            // _that.pageAjax.data = respData.data;
            // let respResult = respData.data;
            // if (respResult.liveExpEditVoList && respResult.liveExpEditVoList.length) {
            //   respResult.liveExpEditVoList.map((item) => {
            //     item.platfomId = item.platfomId * 1;
            //     return item;
            //   });
            // }
            _that.pageAjax.data = respData.data;
            // let length = respData.data.liveExpEditVoList.length;
            for (let i in respData.data.liveExpEditVoList) {
              let obj = {
                index: parseInt(i),
                name: "直播经验" + (1 + parseInt(i))
              };
              this.alone.pageAjax.selectLiveExp.push(obj);
            }
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    // 查找对应平台关系
    getTree(arr, platformList) {
      let list = [];
      arr.forEach(v => {
        let obj = "";
        platformList.forEach(j => {
          if (v === j.id) {
            if (j.parentId !== 0) {
              let arr = j.idSeq.split(",");
              let nameArr = [];
              arr.forEach(v => {
                platformList.forEach(x => {
                  if (v == x.id) {
                    nameArr.push(x.name);
                  }
                });
              });
              obj = nameArr.join("/");
            } else {
              obj = j.name;
            }
          }
        });
        list.push(obj);
      });
      return list;
    },
    getPlatformListData() {
      let _that = this;
      let realTenantId = _that.pageAjax.data.tenantId; // 该主播真正属于的公司
      return getPlatformList(
        { params: { mask: 7, hierarchy: 1, tenantId: realTenantId } },
        { headers: { hasCorporationId: false } }
      )
        .then(resp => {
          let respData = resp.data;

          if (respData.code === _that.STATUS.success[0]) {
            let respResult = _.cloneDeep(respData.data);
            let topParentId = respResult[0].parentId;
            let respResultTile = tileNestingData(respResult);

            // 直播经验id
            _that.platformListSupAjax.oldPlatfomList = _.cloneDeep(
              respData.data
            );

            // 意向平台
            let wantPlatformList = [];

            for (var i = 0, lenI = respResultTile.length; i < lenI; i++) {
              if (respResultTile[i].mask == 2) {
                wantPlatformList.push(respResultTile[i]);
              }
              // 所有平台和都是意向和发布
              if (respResultTile[i].mask == 7 || respResultTile[i].mask == 3) {
                // platformList.push(respResultTile[i]);
                wantPlatformList.push(respResultTile[i]);
              }
            }

            wantPlatformList.push({
              id: topParentId,
              name: "全部",
              parentId: -1
            });
            let wantPlatformListTree = getOffspringnTree(wantPlatformList, -1);
            _that.platformListSupAjax.wantPlatformList = wantPlatformListTree;
            // 意向主播id
          }
        })
        .finally(() => {});

      // return _that.$store.dispatch("getPlatformList").then(() => {
      //   let arr =
      //     _.cloneDeep(
      //       _that.$store.getters.wantPlatformListOffspringnTreeData(1)
      //     ) || [];

      //   _that.platformListSupAjax.data = _.cloneDeep(arr);
      // });
    },
    back() {
      this.$router.go(-1);
    },
    translateData(arr, arrList) {
      let a = selectData(arr, arrList);
      return a;
    }
  }
};
</script>
<style lang="scss" scoped>
.top-box {
  display: flex;
  min-height: 150px;
}
.inline-block {
  display: inline-block;
  line-height: 36px;
  margin-right: 30px;
  min-width: 160px;
}

.in {
  display: inline-block;
  line-height: 36px;
  margin-right: 30px;
  font-size: 16px;
}
.page {
  font-size: 14px;
  .block {
    display: block;
  }
  .inlineBlock {
    display: inline-block;
  }
  .mi-title {
    // color: #999;
  }
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
      padding-left: 110px;
      font-size: 14px;
      // color: #333;
    }
    .link {
      display: inline-block;
      margin-left: 20px;
      font-size: 18px;
      color: #409eff;
    }
    .m-preview {
      text-align: center;
    }

    .m-file {
      position: relative;
      // float: left;
      display: inline-block;
      // width: 400px;
      // height: 400px;
      width: 30%;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    // .pic {
    //   width: 260px;
    //   height: 260px;
    // }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
      .el-icon-video-play {
        font-size: 66px;
        cursor: pointer;
      }
    }
    .m-respBox {
      width: 100%;
      padding-top: 100%;
      position: relative;
    }
    .m-full {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .video {
      opacity: 1;
    }
    .m-addBtn {
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      font-size: 28px;
      color: #ebeef5;
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
  .mi-uploadVideo {
    .m-file {
      position: relative;
      width: 30%;
    }
  }
  .mi-uploadImg {
    .m-file {
      position: relative;
      width: 18%;
    }
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .c-videoLink {
    .el-input {
      margin-right: 10px;
      width: 270px;
      vertical-align: top;
    }
  }
  .c-liveExpEditVoList {
    display: flex;
    .c-liveExpEditVo {
      border-top: 1px solid #ebeef5;
      padding-top: 20px;
      .mi-title {
        padding-left: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-image .el-icon-circle-close {
  color: #fff;
  background: #000;
  border-radius: 50%;
}
.el-form--inline .el-form-item__content,
.el-form-item__content {
  vertical-align: middle;
}
</style>
